import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from "@/components/PageLoading";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import { Card, Button, Form, Modal, Input, Table, Icon, message, Select, DatePicker } from 'antd';
import styles from './index.less';
import moment from 'moment';
import { getDebunkingRumorRecordList, getDebunkingRumorRecordRemove, getDebunkingRumorRecordCancel } from '@/services/securityCenter';

class debunkingRumors extends Component {
	constructor(props) {
		super(props);
		this.state = {
			current: 1,
			size: 10,
			total: 0,
			loading: false,
			list: []
		};
	}

	componentDidMount() {
		this.getList()
	}

	getList = () => {
		const { form } = this.props;
		const { current, size } = this.state;
		let formInfo = form.getFieldsValue();
		console.log(formInfo);
		this.setState({ loading: true }, async () => {
			let obj = {
				current,
				size,
				search: formInfo?.search,
				status: formInfo?.status,
				fromDate: formInfo?.time && formInfo.time.length > 0 ? moment(formInfo.time[0]).format('YYYY-MM-DD') : undefined,
				toDate: formInfo?.time && formInfo.time.length > 0 ? moment(formInfo.time[1]).format('YYYY-MM-DD') : undefined,
			};
			const res = await getDebunkingRumorRecordList(obj)
			this.setState({
				loading: false,
				list: res.records,
				total: res.total
			})
		})
	}

	doSearch = (current, size) => {
		this.setState({ current, size }, () => {
			this.getList()
		})
	}

	openModal = id => {
		const { dispatch } = this.props;
		let pathname = "/debunkingRumors/detail";
		// console.log(id);
		if (id) {
			dispatch(routerRedux.push({ pathname, query: { id }}));
		} else {
			dispatch(routerRedux.push({ pathname }));
		}
	}

	toRemoveDetail = id => {
		const { size } = this.state;
		Modal.confirm({
			title: '确定删除当前辟谣内容',
			okText: '确定',
			okType: 'danger',
			cancelText: '取消',
			onOk: async () => {
				let res = await getDebunkingRumorRecordRemove({ id });
				console.log(res);
				if (res.code === 0) {
					message.success('操作成功');
					this.doSearch(1, size);
				}
			},
			onCancel() {
				console.log('取消操作！！！');
			},
		});
	}

	toWithdrawDetail = id => {
		const { size } = this.state;
		Modal.confirm({
			title: '确定取消发布当前辟谣内容',
			okText: '确定',
			okType: 'danger',
			cancelText: '取消',
			onOk: async () => {
				let res = await getDebunkingRumorRecordCancel({ id });
				console.log(res);
				if (res.code === 0) {
					message.success('操作成功');
					this.doSearch(1, size);
				}
			},
			onCancel() {
				console.log('取消操作！！！');
			},
		});
	}

	render() {
		const { form: { getFieldDecorator } } = this.props;
		const { current, size, total, list, loading } = this.state;
		const columns = [
			{
				title: "标题",
				dataIndex: "title",
				width: 200,
			},
			{
				title: "创建时间",
				dataIndex: "createTime",
				width: 200,
				render: time => {
					return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : '';
				}
			},
			{
				title: "发布时间",
				dataIndex: "publishTime",
				width: 200,
				render: time => {
					return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : '';
				}
			},
			{
				title: "编辑人",
				dataIndex: "createUser",
				width: 300,
			},
			{
				title: "状态",
				dataIndex: "status",
				width: 150,
				render: (status, row) => {
					let text = '';
					switch (status) {
						case 0:
							text = '草稿';
							break;
						case 1:
							text = '已发布';
							break;
						case 2:
							text = '已撤回';
							break;
					};
					return <span>{text}</span>;
				}
			},
			{
				title: "操作",
				width: 200,
				align: 'center',
				render: (_, row) => {
					return (
						<span style={{ display: 'flex', gap: 20 }}>
							{row.status == '0' || row.status == '2' ? (
								<>
									<Button type="primary" onClick={() => this.openModal(row.id)}>编辑</Button>
									<Button type="danger" onClick={() => this.toRemoveDetail(row.id)}>删除</Button>
								</>
							) : null}
							{row.status == '1' ? (
								<>
									<Button type="primary" onClick={() => this.openModal(row.id)}>编辑</Button>
									<span className="zdyButtonD">
										<Button type="primary" onClick={() => this.toWithdrawDetail(row.id)}>撤回</Button>
									</span>
								</>
							) : null}
						</span>
					)
				}
			}
		];

		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card bordered={false}>
						<div className={styles.top}>
							<div>
								<Form layout="inline">
									<Form.Item>
										{getFieldDecorator("status", { initialValue: null })(
											<Select style={{ width: '160px' }}>
												<Select.Option value={null}>全部</Select.Option>
												<Select.Option value={'0'}>草稿</Select.Option>
												<Select.Option value={'1'}>已发布</Select.Option>
												<Select.Option value={'2'}>已撤回</Select.Option>
											</Select>
										)}
									</Form.Item>
									<Form.Item>
										{getFieldDecorator("time", {
											initialValue: [moment().subtract('7', 'days'), moment()],
										})(<DatePicker.RangePicker allowClear={false} style={{ width: '240px' }} />)}
									</Form.Item>
									<Form.Item>
										{getFieldDecorator("search")(
											<Input placeholder="查询标题" style={{ width: '280px' }} />
										)}
									</Form.Item>
									<Form.Item>
										<Button type="primary" onClick={() => this.doSearch(1, size)}>查询</Button>
									</Form.Item>
								</Form>
							</div>
							<Button type="primary" icon='plus' onClick={() => this.openModal(null)}>新建辟谣</Button>
						</div>

						<Table
							columns={columns}
							dataSource={list}
							loading={loading}
							scroll={{ x: "auto" }}
							rowKey={'id'}
							pagination={{
								total,
								current,
								pageSize: size,
								showQuickJumper: true,
								showSizeChanger: true,
								onChange: this.doSearch,
								onShowSizeChange: this.doSearch
							}}
						/>
					</Card>
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(debunkingRumors));
